import React,{useState,useEffect}  from 'react'
// class  MyHeader extends React.Component{
//     render(){
//         return(
//             <header className="comm-header">
//                 <div>
//                     <i className="iconfont icon-left-copy-copy icon_bak"></i>
//                     <h2>{this.props.title||'首页'}</h2>
//                     <i className="iconfont icon-icon-test icon_add"></i>
//                 </div>
//             </header>
//         )
//     }
// }
function MyHeader(props){
    console.log("header 组件被调用了");
    const [title="首页",setTitle]=useState(props.title);
    function changeTitle(){
       
        if(typeof props.change=="function"){
            props.change()
        }else{
            setTitle(title+parseInt(Math.random()*1000));
        }
    
    }
    /*
        useEffect 第二个参数
            如果是一个空数组([])页面只调用一次
            如果第二个参数不是一个空数组，当页面中数组中定义的变量改变时就会调用该方法
            如果第二个参数不传，当页面更新时就会调用该方法
    */
    return(
        <header className="comm-header">
            <div>
                <i className="iconfont icon-left-copy-copy icon_bak" ></i>
                <h2>{title}</h2>
                <i onClick={()=>{changeTitle()}} className="iconfont icon-icon-test icon_add"></i>
            </div>
        </header>
    )
}
export default MyHeader